<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-plus"
          style="float: right"
          @click="addDeviceSensorHardwareConfig"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="listSensorHardwareConfig">{{ $t('search') }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" icon="el-icon-delete" @click="deleteAll">{{ $t('delete') + $t('all') }}</el-button>
      </el-form-item>

    </el-form>
    <div class="uni-scroll app-container" style="height: calc(100vh - 180px)">
      <el-table
        :data="configList"
        style="width: 100%;"
      >
        <el-table-column :label="$t('id')" width="100">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.configSort"
              disabled
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('port')" width="100">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.port"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('template')" width="180">
          <template slot-scope="scope">
            <el-select v-model="scope.row.templateConfigId" disabled>
              <el-option
                v-for="item in templateList"
                :key="item.templateConfigId"
                :label="item.name"
                :value="item.templateConfigId"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column :label="$t('type')" width="180">
          <template slot-scope="scope">
            <el-select v-model="scope.row.connectTypeId" disabled>
              <el-option
                v-for="item in connectTypeList"
                :key="item.connectTypeId"
                :label="item.name"
                :value="item.connectTypeId"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column :label="$t('function')+$t('code')" width="100">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.functionCode"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('registerAddress')" width="120">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.registerAddress"
            />
          </template>
        </el-table-column>

        <el-table-column :label="$t('registerNum')" width="100">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.registerNum"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('keyName')">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.keyName"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('multiple')" width="100">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.multiple"
            />
          </template>
        </el-table-column>
        <el-table-column width="210">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="updateSensorHardwareConfigToDevice(scope.row)"
            >{{ $t('save') }}
            </el-button>
            <el-button
              type="danger"
              @click="deleteSensorHardwareConfigToDevice(scope.row)"
            >{{ $t('delete') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      :visible.sync="dialogFormVisible"
    >
      <el-form
        label-width="20%"
      >
        <el-form-item :label="$t('template')">
          <el-select v-model="config.templateConfigId" @change="configChnage">
            <el-option
              v-for="item in templateList"
              :key="item.templateConfigId"
              :label="item.name"
              :value="item.templateConfigId"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('type')">
          <el-select v-model="config.connectTypeId" disabled>
            <el-option
              v-for="item in connectTypeList"
              :key="item.connectTypeId"
              :label="item.name"
              :value="item.connectTypeId"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('port')">
          <el-input v-model="config.port"/>
        </el-form-item>
        <el-form-item :label="$t('function')+$t('code')">
          <el-input v-model="config.functionCode"/>
        </el-form-item>
        <el-form-item :label="$t('registerAddress')">
          <el-input v-model="config.registerAddress"/>
        </el-form-item>
        <el-form-item :label="$t('registerNum')">
          <el-input v-model="config.registerNum"/>
        </el-form-item>
        <el-form-item :label="$t('keyName')">
          <el-input v-model="config.keyName"/>
        </el-form-item>
        <el-form-item :label="$t('multiple')">
          <el-input v-model="config.multiple"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="insertSensorHardwareConfigToDevice">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { successNotice } from '@/util/common'
import { listTemplateDeviceSensorHardwareConfig } from '@/api/iot/iotTemplateDeviceSensorHardwareConfigApi'
import { listTemplateDeviceSensorHardwareConnectType } from '@/api/iot/iotTemplateDeviceSensorHardwareConnectTypeApi'
import {
  deleteSensorHardwareConfigToDevice,
  insertOrUpdateSensorHardwareConfigToDevice,
  listSensorHardwareConfig
} from '@/api/iot/iotDeviceSensorHardwareConfigApi'

export default {
  name: 'SensorHardwareConfig',
  data() {
    return {
      configList: [],
      templateList: [],
      connectTypeList: [],
      startRank: false,
      name: null,
      deviceCore: null,
      deviceName: null,
      config: {},
      dialogFormVisible: false
    }
  },
  created() {
    const param = this.$route.query
    this.deviceCore = param.deviceCore
    this.deviceName = param.deviceName
    this.listTemplateDeviceSensorHardwareConnectType()
    this.setTagsViewTitle()
  }, methods: {
    setTagsViewTitle() {
      this.tempRoute = Object.assign({}, this.$route)
      const route = Object.assign({}, this.tempRoute, {
        title: `${this.deviceName}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    listTemplateDeviceSensorHardwareConnectType() {
      listTemplateDeviceSensorHardwareConnectType().then(res => {
        const { data, code } = res
        if (code === '200') {
          this.connectTypeList = data
          this.listTemplateDeviceSensorHardwareConfig()
        }
      })
    },
    listTemplateDeviceSensorHardwareConfig() {
      listTemplateDeviceSensorHardwareConfig({}).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.templateList = data
          this.listSensorHardwareConfig()
        }
      })
    },
    listSensorHardwareConfig() {
      listSensorHardwareConfig({
        deviceCore: this.deviceCore
      }).then(res => {
        const { data, code } = res
        if (code === '200') {
          const configList = []
          data.forEach(item => {
            for (const template of this.templateList) {
              if (template.templateConfigId === item.templateConfigId) {
                item.connectTypeId = template.connectTypeId
                configList.push(item)
                break
              }
            }
          })
          this.configList = configList
        }
      })
    },
    insertSensorHardwareConfigToDevice() {
      insertOrUpdateSensorHardwareConfigToDevice({
        deviceCore: this.deviceCore,
        ...this.config
      }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
        }
        this.listTemplateDeviceSensorHardwareConfig()
      })
    },
    updateSensorHardwareConfigToDevice(config) {
      insertOrUpdateSensorHardwareConfigToDevice({
        deviceCore: this.deviceCore,
        ...config
      }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
        }
        this.listTemplateDeviceSensorHardwareConfig()
      })
    },
    deleteSensorHardwareConfigToDevice(item) {
      const that = this
      this.$confirm(this.$t('delete'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteSensorHardwareConfigToDevice({
            configId: item.configId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
            that.listTemplateDeviceSensorHardwareConfig()
          })
        })
    },
    deleteAll(item) {
      const that = this
      this.$confirm(this.$t('delete') + this.$t('all'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteSensorHardwareConfigToDevice({
            all: true,
            deviceCore: that.deviceCore
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
            that.listTemplateDeviceSensorHardwareConfig()
          })
        })
    },
    configChnage() {
      for (const config of this.templateList) {
        if (config.templateConfigId === this.config.templateConfigId) {
          this.config = {
            ...config
          }
          return
        }
      }
    },
    addDeviceSensorHardwareConfig() {
      this.config = {
        ...this.templateList[0],
        port: null
      }
      this.dialogFormVisible = true
    }
  }
}
</script>


